<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">

	<title>Álgebra Relacional</title>

	<!--link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,600' rel='stylesheet' type='text/css'-->

	<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
	<!-- <link rel="stylesheet" href="css/style.min.css" type="text/css" media="screen"> -->
	<!--[if IE]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->


	<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>



</head>

<body>

	<div class="menu">
		<div class="container clearfix">

			<div id="logo" class="grid_2">
				<img src="images/logo.png">
			</div>
			<h3 class="logo-title grid_3">Álgebra Relacional</h3>
			<div id="nav" class="grid_6 omega">
				<ul class="navigation">
					<li data-slide="1">Inicio</li>
					<li data-slide="2">Evaluación</li>
					<li data-slide="3" class="end" style="display:none;">Resultados</li>
				</ul>
			</div>
		</div>
		<hr/>
	</div>

	<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
		<div class="container clearfix">
			<div id="content" class="grid_7">
				<h2>Evaluación</h2>
				<h1>Álgebra Relacional</h1>
				<h3>Autor(es): Fernando Morales, Luis Zárate</h3>
				<h1> </h1>

				<h2>Objetivos:</h2>
				<ul class="norm_list">
					<li>
						Evaluar conocimientos adquiridos en la temática de algebra relacional.
					</li>
					<li>
						Resolver ejercicios de consultas a un determinado modelo de base de datos.
					</li>
				</ul>
				<a href="#" data-slide="2" class ="button">Iniciar Evaluación »</a>

			</div>

			<div id="decorative" class="grid_5 omega">
				<img src="images/Database.png">
			</div>

		</div>
	</div>

	<div class="slide" id="slide3" data-slide="2" data-stellar-background-ratio="0.5">
		<div class="container clearfix" id="practice">
			<div class="model">
				<div class="data">
					<img src="images/model.png"/>
				</div>
				<div class="toggle" style="background-image: -webkit-linear-gradient(top, #e06342, #dc512c);">
					<img src="images/label.png"/>
				</div>
			</div>
			<div id="content2" class="grid_12">
				<div class="grid_12 nav-bar">
					<!--h1 class="p_title grid_3">Práctica</h1-->
					<ul class="practice-nav grid_6">
						<li>Punto 1</li>
						<li>Punto 2</li>
						<li>Punto 3</li>
						<li>Punto 4</li>
					</ul>
				</div>

				<div id="practice1">
					<div class="grid_12">
						<h2 style="display: inline-block; float: left;">Punto 1</h2>
						<ul class="grid_9" style="margin-top:-12px">
							<li>
								<img id="grade1" class="grade" src="images/well-done.png">
								Organice la función por medio de arrastre de operadores para que cumpla la siguiente consulta: "Obtener los profesores que  asisten a  la clase 'C1'" .Obteniendo como resultado las tuplas de la izquierda:
							</li>
						</ul>
					</div>
					<div class="grid_2">
						<p class="image-centered">
							<img src="images/res1.png">
						</p>
					</div>
					<div class="grid_9">

						<div class="grid_8">
							<ul id="sortable1a" class="sortable">
								<img src="images/practice/ejercicio2/res1.png"/>
							</ul>
							<ul id="sortable1b" class="sortable" >
								<img src="images/practice/ejercicio2/res2.png"/>
							</ul>
							<a href="#" id="submit" class="btn" style="margin-left: 40px;">Verificar</a>
							<a href="#" id="clear1" class="btn">Reiniciar</a>
						</div>
						<div class="grid_3">
							<ul id="trash_list" class="trash_list dropped">
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
							</ul>
						</div>
					</div>
				</div>

				<div id="practice2" class="hidden xl_grid">
					<div class="grid_12">
						<h2 style="display: inline-block; float: left;">Punto 2</h2>
						<ul class="grid_9" style="margin-top:-12px">
							<li>
								<img id="grade2" class="grade" src="images/well-done.png">
								Organice la función por medio de arrastre de operadores para que cumpla la siguiente consulta: "Obtener los  valores de PISO y  BLOQUE para las clases a las que asiste el  profesor  'P1' " .Obteniendo como resultado las tuplas de la izquierda:
							</li>
						</ul>
					</div>
					<div class="grid_2">
						<p class="image-centered">
							<img src="images/res2.png">
						</p>
					</div>
					<div class="grid_9">

						<div class="grid_8">
							<ul id="sortable2a" class="sortable" correct-order="1 2 3">
								<img src="images/practice/ejercicio2/res1.png"/>
							</ul>
							<ul id="sortable2b" class="sortable" correct-order="4 5">
								<img src="images/practice/ejercicio2/res2.png"/>
							</ul>
							<a href="#" id="submit2" class="btn" style="margin-left: 40px;">Verificar</a>
							<a href="#" id="clear2" class="btn">Reiniciar</a>
						</div>
						<div class="grid_3">
							<ul id="trash_list2" class="trash_list dropped">
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
							</ul>
						</div>
					</div>
				</div>

				<div id="practice3" class="hidden xl_grid">
					<div class="grid_12">
						<h2 style="display: inline-block; float: left;">Punto 3</h2>
						<ul class="grid_9" style="margin-top:-12px">
							<li>
								<img id="grade3" class="grade" src="images/well-done.png">
								Seleccione el operador correspondiente para que cumpla la siguiente consulta: "Obtener los  nombres de los profesores  que dictan dos clases diferentes en el bloque1". Obteniendo como resultado:
							</li>
						</ul>

					</div>

					<div class="grid_10" style="text-align:center;">
						<div class="grid_2">
							<p class="image-centered">
								<img src="images/res3.png">
							</p>
						</div>
						<p class="line">
							<img src="images/practice/ejercicio3/q_1.png"/>
							<span class="rta" rta="1"></span>
							<img src="images/practice/ejercicio3/q_3.png"/>
						</p>
						<p class="line">
							<img src="images/practice/ejercicio3/q_4.png"/>
							<span class="rta" rta="2"></span>
						</p>
						<p class="line">
							<img src="images/practice/ejercicio3/q_7.png"/>
							<span class="rta" rta="3"></span>
						</p>
						<p></p>
						<div class="grid_7">
							<ul id="sortable3" class="sortable">
								<li><img/></li>
								<li><img/></li>
								<li><img/></li>
							</ul>
						</div>
						<div class="grid_4" style="padding-top:30px;">
							<a href="#" id="submit3" class="btn" style="margin-left: 40px;">Verificar</a>
							<a href="#" id="clear3" class="btn">Reiniciar</a>
						</div>
					</div>
				</div>

				<div id="practice4" class="hidden xl_grid">
					<div class="grid_12">
						<h2 style="display: inline-block; float: left;">Punto 4</h2>
						<ul class="grid_9" style="margin-top:-12px">
							<li>
								<img id="grade4" class="grade" src="images/well-done.png">
								Elija de la lista desplegable el operador correspondiente a cada símbolo
							</li>
						</ul>
					</div>
					<form id="pt4">
					<div class="grid_12">
						<div class="grid_4">
							<ul id="trash_list3a" class="liste">
								<li><span class="subgrade"></span><img/></li>
								<li><span class="subgrade"></span><img/></li>
								<li><span class="subgrade"></span><img/></li>
								<li><span class="subgrade"></span><img/></li>
								<li><span class="subgrade"></span><img/></li>
								<li><span class="subgrade"></span><img/></li>
							</ul>
						</div>
						<div class="grid_7">
							<ul id="trash_list3b" class="liste">
								<li><span class="subgrade"></span><img/></li>
								<li><span class="subgrade"></span><img/></li>
								<li><span class="subgrade"></span><img/></li>
								<li><span class="subgrade"></span><img/></li>
								<li><span class="subgrade"></span><img/></li>
							</ul>
						</div>
						<a href="#" id="submit4" class="btn" style="margin-left: 40px;">Verificar</a>
						<input type="reset" class="btn" id="clear4" value="Reiniciar">
						<a href="#" data-slide="3" class ="end button" style="display:none;">Resultados »</a>
					</div>
				</form>
				</div>
			</div>
		</div>
	</div>



	<div class="slide" id="slide4" data-slide="3" data-stellar-background-ratio="0.5">
		<div class="container clearfix">

			<div id="content" class="grid_12">
				<table style="width:80%; margin:auto;">
					<tr>
						<td style="width:41%; border:none !important;">
							<span style="font-size:38px; height:50%; line-height:80px;">
								Puntos exitosos
							</span>
							<span id="success" style="font-size:70px; height:50%; line-height:80px;">

							</span>
						</td>
						<td rowspan="2" style="border:none; padding-top:70px; padding-left:100px;">
							<span id="final" style="font-size:200px; line-height:200px;font-weight:900px;"></span>
							<h1>Puntaje Final</h1>
						</td>
					</tr>
					<tr>
						<td style="border:none !important;">
							<span style="font-size:38px; height:50%; line-height:80px;">
								Puntos fallidos
							</span>
							<span id="failed" style="font-size:70px; height:50%; line-height:80px;">

							</span>
						</td>
					</tr>
				</table>
			</div>

		</div>
	</div>

	<!--script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script-->
	<script src='js/jquery-1.8.2.min.js'></script>
	<script src='js/jquery-ui.js'></script>
	<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
	<script type="text/javascript" src="js/waypoints.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="js/scripts.js"></script>
	<script type="text/javascript" src="js/practice.js"></script>
	<script src='js/slides.js'></script>
	<!--link rel="stylesheet" type="text/css" href="styles.css"-->

	<!-- <script type="text/javascript" src="js/scripts.min.js"></script> -->
</body>
</html>
